<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"> <!-- 字符集声明 -->

    <title>网页标题</title> <!-- 网页标题 -->

    <style>/* 内部CSS样式表及引入 */
        body {
            background-color: #f0f0f0; /* 背景颜色 */
            text-align: center; /* 文本对齐 */
        }
        p {
            font-family: Arial, sans-serif; /* 字体样式 */
            font-weight: bold; /* 字体粗细 */
        }
    </style>

    <link rel="stylesheet" href="styles.css"> <!-- 外部css样式表引入 -->

    <script src="script.js"></script> <!-- 引用外部JS文件 -->

</head>

<body>
    <p>下面是一个水平线</p> <!-- 段落标签 -->
    <hr> <!-- 水平线 --><br>
    
    这是<i>斜体字</i> <!-- 斜体字标签 --><br>
    这是<b>粗体字</b> <!-- 粗体字标签 --><br>
    这是<sup>上标</sup> <!-- 上标标签 --><br>
    这是<sub>下标</sub> <!-- 下标标签 --><br>
    这是<del>修订标签del-删除线</del> <!-- 修订标签 - 删除 --><br>
    这是<ins>修订标签ins-下划线</ins> <!-- 修订标签 - 插入 --><br><hr>

    下面属性选择器--点击图片或文字跳转<br>
    <a href="https://www.baidu.com">百度一下，你就知道<img src="baidu.png" alt="示例图片" width="" height=""> 
        <!-- 图像标签 --></a> <!-- 超链接标签 --><br>
     无属性选择器--<a href="https://www.ahstu.edu.cn/">安徽科技学院</a> <!-- 超链接标签 --><br>   
    <ys>这是元素选择器-背景颜色</ys>
    <p id="id1">这是id选择器-字体样式，大小，粗细</p>
    <p class="lei">这是类选择器-文本对齐，装饰</p>
    <h3 style="color:red">这是内联css样式表</h3><hr>

    <p>下面是css框模型演示</p>
    <pad> -內边距</pad><br>
    <bor>-边框</bor><br>
    <mar>-外边距</mar><hr>

    <p>下面为js演示</p>
    <p1 id="idp1">id查找</p1><br>
    <p2 class="cp2">类名查找</p2><br>
    <p3>标签名查找</p3><br>
    <button onclick="test1()">点此演示查找html元素</button>
    <script>//-查找html元素（id，标签名，类名）
var p1=document.getElementById("idp1");
var p2=document.getElementsByClassName("cp2");
var p3=document.getElementsByTagName("p3");
function test1(){
alert(p1.innerHTML+"\n"+ p2[0].innerHTML+"\n"+p3[0].innerHTML);
}

    </script><br><br>


    <p0 id="idp">这是js——改变html元素内容演示-未改变--id错误</p0><br>
    <p0 id="idp0">这是js——改变html元素内容演示-未改变--id正确</p0><br>
    <a href="https://www.baidu.com" id="a1">baidu-改变html属性--未改变</a><br>
    <a href="https://www.baidu.com" id="a2">baidu-改变html属性--已改变</a><br>
    <ys id="b1">css颜色改变前</ys><br>
    <ys id="b2">css颜色改变后</ys><br>
    <script>

        var pp=document.getElementById("idp0");//改变html元素内容
        var pp1=pp.innerHTML;
        pp.innerHTML="这是js———改变html元素内容演示-已改变";

        var href1=document.getElementById("a2");//改变html元素属性
        href1.href="https://www.ahstu.edu.cn/";

        var ys1=document.getElementById("b2");//DOM css
        ys1.style.backgroundColor="red";

        var date=new Date();
        document.write("这是创建动态html演示....时间："+date.toLocaleString());//创建动态html内容
    </script><br>

    <p id="dom1">dom事件-未触发-pig是猪</p><!--外部js-->
    <button onclick="change()">点此修改上述文本内容-触发dom事件</button>

    <hr>

<p>下面为表单演示</p>
    <form action="" method="post" name="exampleForm" enctype="multipart/form-data">
        <!-- 表单标签 -->
        <input type="text" id="username" name="username" placeholder="请输入用户名" required><br> <!-- 输入标签 - 文本 -->
        <input type="password" placeholder="请输入密码" required><br> <!-- 输入标签 - 密码 -->
        <input type="radio" name="1gender" value="male" required> Male <!-- 输入标签 - 单选框 -->
        <input type="radio" name="1gender" value="female" required> Female<br>
        <input type="checkbox" name="agree" required> 我同意协议 <!-- 输入标签 - 复选框 --><br> 
        <input type="submit" value="提交"><br> <!-- 输入标签 - 提交按钮 -->
        <input type="button" value="点此激活" onclick="welcome()"></input> <!-- 按钮标签 -->
        <script>
            function welcome(){
                alert("hello world!");
            }
        </script>
    </form>


 
</body>

</html>
